<template>
  <FrontSideTreeTable
    treeDataUrl="/rel/memberDisease/getPartsMemberTree"
    tableDataUrl="/rel/memberDisease/getList"
    addUrl="/rel/memberDisease/add"
    editUrl="/rel/memberDisease/edit"
    deleteUrl="/rel/memberDisease/delete"
    treeTitle="部构件"
    :tableTitle="selectedNode.name+'构件病害列表'"
    :tableProps="{parentId:'memberTypeId'}"
    :columns="columns"
    searchHint="根据材料类型、构件类型、病害类型或描述类型查找"
    :searchProps="searchProps"
    :form="form"
    :loadingForm="loadingForm"
    :rules="rules"
    @onNodeClick="handleNodeClick"
    @beforeAdd="beforeAdd"
    @beforeEdit="beforeEdit"
    @onTableCreated="handleTableCreated"
    @onTreeCreated="handleTreeCreated">
    <!--筛选列-->
    <template slot="afterColumns">
      <!--筛选列，使用filterChange监听事件代替filterMethod方法-->
      <el-table-column
        align="center"
        prop="diseaseDescTypeName"
        column-key="diseaseDescTypeId"
        label="病害描述类型"
        :filters="diseaseDescTypeFilters"
        filter-placement="bottom">
      </el-table-column>
      <!--筛选列，使用filterChange监听事件代替filterMethod方法-->
      <el-table-column
        align="center"
        prop="materialTypeName"
        column-key="materialTypeId"
        label="材料类型"
        :filters="materialTypeFilters"
        filter-placement="bottom">
      </el-table-column>
    </template>
    <!--新增表单-->
    <template slot="form">
      <el-form-item label="材料类型">
        <el-select v-model="form.materialTypeId" style="width: 100%;" placeholder="选择材料类型" filterable clearable>
          <el-option v-for="item of materialTypes" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="构件类型" prop="memberTypeId">
        <el-select v-model="form.memberTypeId" style="width: 100%;" placeholder="选择构件类型，输入可以搜索" filterable>
          <el-option-group v-for="group of filterMemberTypes" :key="group.id" :label="group.name">
            <el-option v-for="item of group.children" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-option-group>
        </el-select>
      </el-form-item>
      <el-form-item v-if="isAdd" label="病害类型" prop="diseaseTypeIds">
        <el-select v-model="form.diseaseTypeIds" style="width: 100%" placeholder="(多选)选择病害类型，输入可以搜索" multiple filterable>
          <el-option v-for="item of filterDiseaseTypes" :key="item.id" :label="item.name+(!!item.notes?'('+item.notes+')':'')" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="描述类型" prop="diseaseDescTypeId">
        <el-select v-model="form.diseaseDescTypeId" style="width: 100%;" placeholder="选择病害描述类型" filterable>
          <el-option v-for="item of diseaseDescTypes" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
    </template>
  </FrontSideTreeTable>
</template>

<script>
  import FrontSideTreeTable from "../../template/FrontSideTreeTable.vue"
  import {clearFields} from "../../../assets/js/utils/ObjectUtils"
  import {childrenArrayOf} from "../../../assets/js/utils/TreeUtils"
  import {doGet} from "../../../assets/js/utils/RequestUtils"

  const MATERIAL_TYPE_URL = "/rel/memberDisease/getMaterialTypes",
    DISEASE_TYPE_URL = "/rel/memberDisease/getDiseaseTypes",
    DISEASE_DESC_TYPE_URL = "/rel/memberDisease/getDiseaseDescTypes";

  export default {
    name:"MemberDisease",
    data() {
      return {
        columns:[
          {prop:"sortNo", label:"使用次数", sortable:"custom", width:"120"},
          {prop:"memberTypeName", label:"构件"},
          {prop:"diseaseTypeName", label:"病害"}
        ],
        searchProps:["materialTypeName","memberTypeName","diseaseTypeName","diseaseDescTypeName"],
        form:{
          materialTypeId:"",
          memberTypeId:"",
          diseaseTypeId:"",
          diseaseTypeIds:[],
          diseaseDescTypeId:"",
        },
        loadingForm:false,
        rules:{
          memberTypeId:[
            {required:true, message:"请选择构件类型", trigger:"blur"}
          ],
          diseaseTypeId:[
            {required:true, message:"请选择病害类型", trigger:"blur"}
          ],
          diseaseTypeIds:[
            {required:true, type:"array", message:"请选择病害类型", trigger:"blur"}
          ],
          diseaseDescTypeId:[
            {required:true, message:"请选择病害描述类型", trigger:"blur"}
          ]
        },
        selectedNode:{name:""},
        tableData:[],
        treeData:[],
        materialTypes:[],
        diseaseTypes:[],
        diseaseDescTypes:[],
        isAdd:false
      }
    },
    computed:{
      filterMemberTypes() {
        let result = [];
        let parentNodes = this.treeData.filter(item=>!item.parentId);
        let childNodes = this.treeData.filter(item=>!!item.parentId);
        //拼接子节点
        parentNodes.forEach(pNode=>result.push({children:childrenArrayOf(pNode, childNodes), ...pNode}));
        return result;
      },
      filterDiseaseTypes() {
        let currentNodes = this.treeData.filter(item=>item.id === this.form.memberTypeId);
        if(currentNodes.length > 0) {
          return this.diseaseTypes
            .filter(item=>item.partsTypeId === currentNodes[0].parentId)
            .filter(item=>!this.tableData.some(data=>
            ((!data.materialTypeId && !this.form.materialTypeId) || data.materialTypeId === this.form.materialTypeId)
            && data.memberTypeId===this.form.memberTypeId
            && data.diseaseTypeId===item.id));
        }else {
          return [];
        }
      },
      materialTypeFilters() {
        return this.materialTypes.map(item=>{
          return {
            text:item.name,
            value:item.id
          }
        });
      },
      diseaseDescTypeFilters() {
        return this.diseaseDescTypes.map(item=>{
          return {
            text:item.name,
            value:item.id
          }
        });
      }
    },
    methods:{
      handleNodeClick(data) {
        this.selectedNode = {...data};
      },
      beforeAdd() {
        this.isAdd = true;
        clearFields(this.form);
        this.form = {
          materialTypeId:"",
          memberTypeId:this.selectedNode.id,
          diseaseTypeId:"",
          diseaseTypeIds:[],
          diseaseDescTypeId:"",
        };
      },
      beforeEdit(data) {
        this.isAdd = false;
        this.form = {...data, diseaseTypeIds:[]};
      },
      handleTableCreated(data) {
        this.tableData = data;
      },
      handleTreeCreated(data) {
        this.treeData = data;
      },
      fetchSelectData() {
        this.loadingForm = true;
        doGet(MATERIAL_TYPE_URL, {component:this})
          .then(response=>{
            this.materialTypes = response;
            this.fetchDiseaseTypeData();
          });
      },
      fetchDiseaseTypeData() {
        doGet(DISEASE_TYPE_URL, {component:this})
          .then(response=>{
            this.diseaseTypes = response;
            this.fetchDiseaseDescTypeData();
          });
      },
      fetchDiseaseDescTypeData() {
        doGet(DISEASE_DESC_TYPE_URL, {component:this})
          .then(response=>this.diseaseDescTypes = response)
          .finally(()=>this.loadingForm = false);
      }
    },
    activated() {
      this.fetchSelectData();
    },
    components:{FrontSideTreeTable}
  }
</script>



// WEBPACK FOOTER //
// MemberDisease.vue?17e066f4